/* @group Responsive */

@media (min-width: 1200px) {
    #page-mod-quiz-edit ul.slots {
        li.section li.activity .activityinstance {
            width: 90%;
        }
        .activityinstance span.instancename {
            width: 94%;
        }
    }
}

@media (max-width: @navbarCollapseWidth) {
    h1#title {
        font-size: 2.5em;
        line-height: 35px;
    }
    h1#smalltitle {
        font-size: 1.8em;
        line-height: 30px;
    }
    .navbar-inner {
        .brand {
            display: none;
        }

        .nav-collapse {
            float: left;
            display: block;
            width: 100%;
            z-index: 10; // Get on top of slider.
            margin-left: -10px;
            margin-right: -10px;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            .navbar-text {
                padding-left: 15px;
                padding-right: 15px;
            }
            .nav > li {
                float: left;
            }
            #custom_menu_language,
            #custom_menu_courses,
            #custom_menu_themecolours,
            #custom_menu_activitystream,
            #custom_menu {
                vertical-align: top;
                clear: both;
                width: 100%;
            }
            &.collapse.in[style*="height: auto"] {
                min-height: 768px;
                //overflow: visible;  // Definitely killing the complete() function (line: 157 in bootstrap.js) being fired at the end of the transition.
            }
            &.in .nav {
                .divider {
                    width: 100%;
                }
            }
            .nav > li > a {
                margin-bottom: 0px;
                border-radius: 0;
            }
            .nav > li > .dropdown-menu {
                &:before {
                    content: '';
                    display: inline-block;
                    border-left: 7px solid transparent;
                    border-right: 7px solid transparent;
                    border-bottom-color: @dropdownBorder;
                    position: absolute;
                    top: -7px;
                    left: 9px;
                }
                &:after {
                    content: '';
                    display: inline-block;
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-bottom: 6px solid @dropdownBackground;
                    position: absolute;
                    top: -6px;
                    left: 10px;
                }
            }
            .open > .dropdown-menu {
                display: block;
            }
            .dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 1000;
                display: none;
                float: left;
                border: 1px solid rgba(0, 0, 0, .2);
                min-width: 160px;
                padding: 5px 0;
                .border-radius(6px);
            }
        }
    }

    #page-message-index {
        #region-main {
            float: left;
            .message {
                .contactselector, .messagearea {
                    width: 100%;
                }
                .messagearea {
                    border-left: transparent;
                }
            }
        }
        &.hasboringlayout {
            #region-main {
                float: right;
            }
        }
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    body{
        font-size: 13px !important;
        line-height: 18px;
    }
    h1#title {
        font-size: 2em;
        line-height: 30px;
    }
    h1#smalltitle {
        font-size: 1.5em;
        line-height: 30px;
    }
    .row-fluid .desktop-first-column {
        margin-left: 0;
    }
    #page-mod-quiz-edit ul.slots {
        li.section li.activity .activityinstance {
            width: 80%;
        }
        .activityinstance span.instancename {
            width: 90%;
        }
    }
}

@media (max-width: 767px) {
    body{
        font-size: 12px !important;
        font-weight: 500;
        line-height: 16px;
    }
    h1#title {
        font-size: 1.8em;
        line-height: 30px;
    }
    h1#smalltitle {
        font-size: 1.2em;
    }
    .row-fluid .desktop-first-column {
        clear: right;
    }

    #page.container-fluid {
        padding: 5px;
    }

    #page-header {
        height: auto;
        h2#subtitle {
            top: 0px;
            line-height: 10px;
        }
        .icon-collapse {
            overflow: hidden;
            margin-top: 40px;
            margin-right: 10px;
            float: right;
        }
        .btn-icon {
            display: block;
        }
        #headerlogo {
            top: 0px;
        }
    }

    #marketing-spots {
        .marketing-spot {
            margin-bottom: 10px;
            padding-bottom: 10px;
            .button {
                text-align: right;
                .marketing-button.responsive {
                    display: inline !important;
                }
            }
        }
    }

    #marketing-buttons {
        display: none;
    }

    // quiz.less in Essential and mod version.
    #page-mod-quiz-edit ul.slots {
        li.section li.activity .activityinstance {
            width: 80%;
        }
        .activityinstance span.instancename {
            width: 70%;
        }
    }

    // Docked blocks.
    body.has_dock #dockeditempanel .dockeditempanel_content {
        width: 300px;
    }
}

@media (max-width: 480px) {
    // quiz.less in Essential and mod version.
    #page-mod-quiz-edit ul.slots {
        li.section li.activity .activityinstance {
            width: 80%;
        }
        .activityinstance span.instancename {
            width: 40%;
        }
    }
}

@media (max-width: 455px) {
    #page-header {
        .icon-collapse {
            margin-top: -30px;
        }
    }
}
/* @end */